<template>
  <!-- 顶部搜索 -->
  <Search></Search>
  <section class="big-container">
    <!-- 头部筛选 -->
    <div id="sqt-openh5-poiListFilter" class="kk-filter-wrapper">
      <div
        class="com-filter"
        id="m-filter-wrapper-nosticky"
        style="height: auto"
      >
        <div
          class="filter-wrapper"
          id="m-filter-wrapper-sticky"
          style="top: auto"
        >
          <div
            class="m-filter-subcategory"
            id="m-filter-subcategory-wrapper"
            @click="addActive"
          >
            <div class="subcategory-wrapper">
              <div class="subcategory-item">
                <div class="subcategory-item-pic">
                  <img
                    class="pic-url"
                    src="https://p0.meituan.net/wmbanner/62884bb5d5f3af421d47fa2deba17b9510262.png"
                  />
                </div>
                <div class="subcategory-item-txt">全部</div>
              </div>
              <div class="subcategory-item">
                <div class="subcategory-item-pic">
                  <img
                    class="pic-url"
                    src="https://p1.meituan.net/wmbanner/35eb2bce73e409d1dfa89055eda1ffd910762.png"
                  />
                </div>
                <div class="subcategory-item-txt">饺子馄饨</div>
              </div>
              <div class="subcategory-item">
                <div class="subcategory-item-pic">
                  <img
                    class="pic-url"
                    src="https://p0.meituan.net/wmbanner/4af6525630137302c5593e1bda970e4814726.png"
                  />
                </div>
                <div class="subcategory-item-txt">韩国料理</div>
              </div>
              <div class="subcategory-item">
                <div class="subcategory-item-pic">
                  <img
                    class="pic-url"
                    src="https://p0.meituan.net/wmbanner/84c98d595c37075324d26757bd6043c814269.png"
                  />
                </div>
                <div class="subcategory-item-txt">粥粉面馆</div>
              </div>
              <div class="subcategory-item">
                <div class="subcategory-item-pic">
                  <img
                    class="pic-url"
                    src="https://p0.meituan.net/wmbanner/7b71e55f0e167b30616c8a35c7d8677810909.png"
                  />
                </div>
                <div class="subcategory-item-txt">江浙菜系</div>
              </div>
              <div class="subcategory-item">
                <div class="subcategory-item-pic">
                  <img
                    class="pic-url"
                    src="https://p1.meituan.net/wmbanner/341bab40d72feca31be40eddb8e6964312218.png"
                  />
                </div>
                <div class="subcategory-item-txt">口味川湘</div>
              </div>
            </div>
          </div>
          <div class="m-filter-out">
            <div class="out-wrapper">
              <div class="out-item-left">
                <div class="out-item-info" @click="addRotateLeft">
                  <div class="out-item-info-tit">综合排序</div>
                  <img
                    class="out-item-info-titarrow"
                    src="https://p0.meituan.net/travelcube/c031c9628ddd446e8c7635535297acda228.png"
                  />
                </div>
              </div>
              <div class="out-item-center"></div>
              <div class="out-item-right">
                <div class="out-item-info" @click="addRotateRight">
                  <img
                    class="out-item-info-titarrow"
                    src="https://p0.meituan.net/travelcube/c031c9628ddd446e8c7635535297acda228.png"
                  />
                  <div class="out-item-info-tit">全部筛选</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="m-filter-quick">
            <div class="quick-wrapper" @click="addActiveItem">
              <div class="quick-item">
                <div class="quick-item-hidebar">
                  <div class="quick-item-tit">
                    <div class="quick-item-tittxt">千锋</div>
                  </div>
                </div>
              </div>
              <div class="quick-item">
                <div class="quick-item-hidebar">
                  <div class="quick-item-tit">
                    <div class="quick-item-tittxt">千锋</div>
                  </div>
                </div>
              </div>
              <div class="quick-item">
                <div class="quick-item-hidebar">
                  <div class="quick-item-tit">
                    <div class="quick-item-tittxt">千锋</div>
                  </div>
                </div>
              </div>
              <div class="quick-item">
                <div class="quick-item-hidebar">
                  <div class="quick-item-tit">
                    <div class="quick-item-tittxt">千锋</div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 资料卡列表 -->
    <article class="food-cards">
      <FoodCard ref="son"></FoodCard>
    </article>
  </section>
</template>

<script>
import { defineComponent } from 'vue'
import Search from '@/components/foodContent/search.vue'
// 引入商品卡片组件
import FoodCard from '@/components/foodContent/foodCard.vue'
export default defineComponent({
  data() {
    return { sortFlag: true }
  },
  components: {
    Search,
    FoodCard
  },
  methods: {
    // 添加类名事件
    addActive(e) {
      e.target.parentNode.parentNode.classList.toggle('active-item')
      e.target.parentNode.classList.toggle('active-item')
    },
    // 添加按钮旋转和排序功能
    addRotateLeft(e) {
      // 旋转箭头样式
      e.target.parentElement.lastElementChild.classList.toggle('arrow-show')
      // 升序降序
      if (this.sortFlag) {
        this.$refs.son.cards.sort((a, b) => {
          return b.text.score - a.text.score
        })
      } else {
        this.$refs.son.cards.sort((a, b) => {
          return a.text.score - b.text.score
        })
      }
      this.sortFlag = !this.sortFlag
      console.log(this.$refs.son.cards)
    },
    addRotateRight(e) {
      e.target.parentElement.firstElementChild.classList.toggle('arrow-show')
    }
    // addActiveItem(e) {
    //   e.target.parentNode.parentNode.parentNode.classList.toggle('active-item')
    // }
  }
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
// 取消滚动条样式
::-webkit-scrollbar {
  display: none;
}
.big-container {
  background-color: rgb(245, 245, 246);
}
.kk-filter-wrapper {
  padding-top: 10px;
}
.com-filter .filter-wrapper {
  padding: 0 0.12rem;
}
.m-filter-subcategory {
  height: 66px;
  overflow: hidden;
}
.m-filter-subcategory .subcategory-wrapper {
  display: flex;
  align-items: center;
  overflow: auto;
}

.m-filter-subcategory .subcategory-item {
  flex: none;
  min-width: 72px;
}
.m-filter-subcategory .subcategory-item.active-item .subcategory-item-pic {
  background-image: linear-gradient(
    180deg,
    #ffd9b3 0%,
    rgba(255, 217, 179, 0) 100%
  );
}

.m-filter-subcategory .subcategory-item-pic {
  margin: 0 auto;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  overflow: hidden;
}
.m-filter-subcategory .subcategory-item-pic .pic-url {
  height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
}

.m-filter-subcategory .subcategory-item.active-item .subcategory-item-txt {
  font-weight: 500;
  color: #ff8000;
}
.m-filter-subcategory .subcategory-item-txt {
  font-size: 14px;
  line-height: 20px;
  margin-top: -4px;
  box-sizing: border-box;
  padding-bottom: 8px;
  text-align: center;
}
.m-filter-out {
  height: 28px;
  overflow: hidden;
  padding: 0 7px 0 8px;
}
.m-filter-out .out-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.m-filter-out .out-item-left {
  flex: none;
  width: 25%;
  overflow: hidden;
}
.m-filter-out .out-item-info {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.m-filter-out .out-item-info-tit {
  flex-shrink: 1;
  font-size: 12px;
  color: #222426;
  text-align: center;
  line-height: 28px;
  font-weight: 600;
}
.util-text-overflow-ellipsis-oneline,
.m-filter-out .out-item-info-tit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-filter-out .out-item-info-titarrow {
  margin-left: 4px;
  flex: none;
  height: 6px;
  width: 7px;
  transition: all 0.2s;
}
.m-filter-out .out-item-right {
  flex: none;
  overflow: hidden;
  width: 25%;
}
.m-filter-out .out-item-right .out-item-info {
  flex-direction: row-reverse;
}
.m-filter-out .out-item-info {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.m-filter-out .out-item-info-tit {
  flex-shrink: 1;
  font-size: 12px;
  color: #222426;
  text-align: center;
  line-height: 28px;
  font-weight: 600;
}
.util-text-overflow-ellipsis-oneline,
.m-filter-out .out-item-info-tit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-filter-out .out-item-info-titarrow {
  margin-left: 4px;
  -webkit-flex: none;
  flex: none;
  height: 6px;
  width: 7px;
  transition: all 0.2s;
}
.m-filter-out .out-item-info-titarrow.arrow-show {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.m-filter-quick {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.m-filter-quick .quick-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  overflow-y: hidden;
  overflow-x: scroll;
}
.m-filter-quick .quick-item-hidebar {
  width: 0.7rem;
  height: 0.25rem;
  border-radius: 0.1rem;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  background-color: #fff;
  position: relative;
}
.m-filter-quick .quick-item-tit {
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex: 1;
  flex: 1;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
}
.m-filter-quick .quick-item-tittxt {
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  font-size: 0.11rem;
  color: #575859;
  text-align: center;
}
.util-text-overflow-ellipsis-oneline,
.m-filter-quick .quick-item-tittxt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-filter-quick .quick-item.active-item .quick-item-hidebar {
  background-image: linear-gradient(135deg, #ffe14d 0%, #ffc34d 100%);
}
.food-cards {
  padding: 0.1rem 0.02rem;
}
</style>
